<template>
  <div>
    <el-dialog :title="title" :visible.sync="detailvisible" width="850px" append-to-body class="my-dialog" @close="cancel">
      <div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="执勤点名称" prop="realName">
            <el-input
              v-model="queryParams.realName"
              placeholder="请输入执勤点名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" plain>搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="paramId=0,zhudianVisible=true" plain>新增所属执勤点</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="teamlist" size="small" height="400">
          <el-table-column label="执勤点名称" align="center" prop="name"/>
          <el-table-column
            label="所在地区"
            align="center"
            prop="inAddress"
          />
          <el-table-column
            prop="type"
            label="执勤点类型"
            width="100"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_stagnation_type"
                :value="scope.row.type"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="执勤点状态"
            align="center"
            prop="status"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:stagnation_point:edit']"
              >编辑
              </el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleViewTeam(scope.row)"
                v-hasPermi="['system:team:list']"
              >查看执勤点人员
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :layout="layout"
          @pagination="getList"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel" size="small" plain>确 定</el-button>
      </div>
    </el-dialog>
    <zhudianAdd :visible.sync="zhudianVisible" :paramDept="param" @getList="getList" :paramId="paramId"></zhudianAdd>
    <zhudianTeam :visible.sync="teamVisible" :param="paramPoint"></zhudianTeam>
  </div>
</template>

<script>
import {listStagnationPoint} from "@/api/system/stagnation_point";
import zhudianAdd from "./add"
import zhudianTeam from "@/components/zhudian-team/index"

export default {
  name: "index",
  props: ['visible', 'param'], // param 执勤点信息
  dicts: ['sys_stagnation_type'],
  components:{zhudianAdd, zhudianTeam},
  data() {
    return {
      teamlist: [],
      detailvisible: false,
      title: '项目执勤点信息',
      // 遮罩层
      loading: true,
      // 选中数组
      layout: 'total, sizes, prev, pager, next',
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      zhudianVisible: false,
      teamVisible: false,
      paramId: 0,
      paramPoint: null
    }
  },
  watch: {
    visible() {
      this.detailvisible = this.visible
      if (this.visible) {
        this.getList()
      } else {
      }
    }
  },
  created() {
  },
  methods: {
    /** 查询定位器列表 */
    getList() {
      this.loading = true;
      listStagnationPoint(this.queryParams).then(response => {
        this.teamlist = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    submitForm() {
      if (!this.dealerItem) {
        this.$message.error(this.title)
        return
      }
      let that = this
      console.log('dealerItem:', this.dealerItem, that.queryData)
      // type batchBindingUser 批量绑定设备； bindingUser 单独绑定设备
      if (this.type == 'bindingUser') {
        this.$modal
          .confirm(`确定将该设备绑定至【${this.dealerItem.realName}】,是否继续？`)
          .then(function () {
            return DevideBindingUser({
              deviceIds: [that.queryData.deviceId],
              dealerId: that.dealerItem.adminId
            });
          })
          .then(() => {
            this.$modal.msgSuccess("绑定成功");
            this.$emit('getList')
            this.cancel()
          })
          .catch(() => {
          });
        return
      }
      if (this.type == 'batchBindingUser') {
        this.$modal
          .confirm(`确定为经销商【${this.dealerItem.realName}】批量绑定【${this.queryData.length}】台设备,是否继续？`)
          .then(function () {
            return DevideBindingUser({
              deviceIds: that.queryData,
              dealerId: that.dealerItem.adminId
            });
          })
          .then(res => {
            // this.$modal.msgSuccess("绑定成功");
            // this.messegeFn(res.msg)
            this.$emit('getList')
            this.cancel()
          })
          .catch(() => {
          });
        return
      }
      this.$emit('dealerGet', this.dealerItem)
      this.cancel()
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.dealerId = ''
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dealerId = ''
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleViewTeam(row) {
      this.paramPoint = JSON.parse(JSON.stringify(row))
      this.teamVisible = true
    },
    handleUpdate(row) {
      this.paramId = row.id
      this.zhudianVisible= true
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.name + '"执勤点吗？').then(function () {
        return updateStagnationPoint({id: row.id, status: row.status});
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
  }
}
</script>

<style scoped>

</style>
